<template>
  <el-upload
    action
    class="upload-demo"
    :on-remove="handleRemove"
    :before-remove="beforeRemove"
    multiple
    :limit="3"
    :on-exceed="handleExceed"
    :file-list="fileList"
    :accept="accept"
    :http-request="handleUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  </el-upload>
</template>

<script>
import { put } from '@/utils/ali-oss'
export default {
  props: {
    accept: {
      type: String,
      default: '*'
    },
    fileList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleUpload(file) {
      console.log(`file`, file)
      console.log(`put`, put)
      put(file.file.name, file.file).then(res => {
        console.log(res)
      })
    }
  }
}
</script>

<style scoped></style>
